<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>任务创编</title>
    <link rel="stylesheet" href="../layui/css/layui.css">

    <style>
        /* 改变layui复选框选中颜色 */
        .layui-form-checked[lay-skin=primary] i {
            border-color: #1890ff !important;
            background-color: #1890ff;
            color: #fff;
        }

        /* 改变layui复选框经过颜色 */
        .layui-form-checkbox[lay-skin=primary]:hover i {
            border-color: #1890ff;
            color: #fff;
        }

        /* 改变layui选择框的背景颜色和字体颜色 */
        .layui-form-select dl dd.layui-this {
            background-color: #409eff;
            color: #dcdfe6;
        }

        /* 解决使用Vue.js页面加载数据的时候，页面闪现原始代码 */
        [v-cloak] {
            display: none;
        }
        /* layui设置按钮样式 */
        .layui-btn{
            border-radius: 4px;
        }
        .layui-laypage .layui-laypage-curr .layui-laypage-em {

            background-color: rgba(30, 159, 255, 0.76) !important
        }
        /* layui 数据表格table行高设置 */
        .layui-table-cell {
            height: auto;
            line-height: 28px;
        }
    </style>

</head>

<body>
    <!-- 导航面包屑 -->
    <div class="x-nav" style="border-bottom: 1px solid #e5e5e5;padding: 0 20px;line-height: 39px;height:39px">
        <span class="layui-breadcrumb" style="font-size: 6px!important;padding-left: 10px;color: #999;">
            <a href="#">首页</a>
            <a href="#">演示</a>
            <a><cite>导航元素</cite></a>
        </span>
        <a class="layui-btn layui-btn-sm"
            style="line-height:1.6em;margin-top:3px;float:right;background-color: rgba(30, 159, 255, 0.76) !important;border-radius: 4px;"
            onclick="location.reload()" title="刷新">
            <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i></a>
    </div>
    
    <form class="layui-form" style="margin-top: 30px;width: 1000px;" id="app" v-cloak>

        <div class="layui-form-item" style="width: 400px;">
            <label class="layui-form-label"><span style="color: red;">*</span>年级：</label>
            <div class="layui-input-block">
                <select id="levelName" lay-filter="levelName" lay-search required lay-verify="required">
                    <option value="">请选择</option>

                </select>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label"><span style="color: red;">*</span>标题：</label>
            <div class="layui-input-block">
                <input type="text" id="title" required lay-verify="required" autocomplete="off"
                    class="layui-input">
            </div>
        </div>

        <label class="layui-form-label"><span style="color: red;">*</span>试卷：</label>
        <div class="layui-form-item" style="margin-left:110px;margin-top: -180px;">
            <table class="layui-table">
                <colgroup>
                    <col width="150">
                    <col width="200">
                    <col width="200">
                    <col width="70">
                </colgroup>
                <thead>
                    <tr>
                        <th>学科</th>
                        <th>试卷名称</th>
                        <th>创建时间</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="(e,i) in examPapers" :key="i">
                        <td>{{e.subjectName}}({{e.levelName}})</td>
                        <td>{{e.examPaperName}}</td>
                        <td>{{e.createTime}}</td>
                        <td><button type="button" class="layui-btn layui-btn-sm"
                                style="border-radius: 5px;background-color: #ff4949;" @click="delExam(i)">删除</button></td>
                    </tr>
                  
                    <tr v-if="examPapers.length==0 || examPapers==null">
                        <td colspan="4" style="text-align: center;">暂无数据</td>
                    </tr>
                </tbody>
            </table>
        </div>



        <div class="layui-form-item" style="margin-left: 110px;margin-top: 30px;">
            <div class="layui-inline">
                <input type="button" class="layui-btn layui-btn-normal" value="提交" @click="save"
                    style="border-radius: 5px;">
            </div>
            <div class="layui-inline">
                <input type="reset" class="layui-btn layui-btn-primary" value="重置" style="border-radius: 5px;" @click="cls">
            </div>
            <div class="layui-inline">
                <input type="button" class="layui-btn layui-btn-normal" value="添加试卷" @click="addExam"
                    style="border-radius: 5px;background-color: #13ce66;">
            </div>

        </div>


    </form>



    <div id="paperQuestionAdd" style="display: none;">
        <!-- 头部工具栏，用script标签包裹 -->
        <script type="text/html" id="searchToolBar">
            <div class="layui-inline">
                <select id="subjectName" lay-filter="subjectName" lay-search required lay-verify="required">
                    <option value="">学科</option>
                    <option value="语文">语文</option>
                    <option value="数学">数学</option>
                    <option value="英语">英语</option>
                    <option value="物理">物理</option>
                    <option value="化学">化学</option>
                    <option value="生物">生物</option>
                    <option value="历史">历史</option>
                    <option value="政治">政治</option>
                </select>
            </div>
            
            <div class="layui-inline">
                <button type="button" id="searchBtn" class="layui-btn layui-btn-sm" lay-event="search"><i class="layui-icon">&#xe615;</i></button>
            </div>
            <div class="layui-inline">
                <button class="layui-btn layui-btn-sm" lay-event="getCheckData">查看当前选中试题</button>
                <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">查看当前选中试题数</button>
                <button class="layui-btn layui-btn-sm layui-btn-normal" lay-event="addAll">确定</button>
            </div>
        </script>
        <!-- 行操作工具栏 -->
        <script type="text/html" id="handleDemo">
            <a class="layui-btn layui-btn-primary layui-btn-sm" lay-event="view">预览</a>
        </script>
        <table id="demo" class="layui-hide" lay-filter="ExamPaperList"></table>
    </div>




    <script src="../js/jquery-1.12.4.min.js"></script>
    <script src="../js/Vue.js"></script>
    <script src="../layui/layui.js"></script>
    <script src="../layer/layer.js"></script>
    <script src="js/over/task_add.js"></script>
    <script src="js/xadmin.js"></script>
    <script>
        layui.use('form', function () {
            let form = layui.form;

            // 年级名称下拉列表框监视
            form.on('select(levelName)', function (data) {
                //console.log(data.value); 得到被选中的值     
                sessionStorage.setItem("addExamPaperLevelName", data.value);
            });
        });
    </script>
</body>

</html>